<template>
  <d2-container>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <div class="d2-breadcrumb">
        <el-breadcrumb-item>编辑合同</el-breadcrumb-item>
      </div>
    </el-breadcrumb>
    <el-form
      label-width="100px"
      :model="query"
      :rules="rules"
      ref="add"
      label-position="top"
    >
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item
            label="合同单号"
            prop="contractNo"
            :rules="[{ required: true, message: '字段不能为空' }]"
          >
            <el-input
              style="width: 80%"
              placeholder="请输入"
              type="text"
              v-model.trim="query.contractNo"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="房源名称" prop="housingSourceId">
            <el-select
              v-model="query.housingSourceId"
              placeholder="请选择"
              style="width: 80%"
            >
              <el-option
                :label="item.name"
                :value="item.id"
                v-for="(item, index) in houseList"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="园区名称" prop="gardenId">
            <el-select
              v-model="query.gardenId"
              placeholder="请选择"
              style="width: 80%"
            >
              <el-option
                :label="item.gardenName"
                :value="item.id"
                v-for="(item, index) in gardenList"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="乙方手机号"
            prop="wxUserPhone"
            :rules="[{ required: true, message: '字段不能为空' }]"
          >
            <el-input
              maxlength="11"
              style="width: 80%"
              placeholder="请输入"
              type="text"
              v-model.trim="query.wxUserPhone"
              @blur="wxUserPhoneBlur"
            ></el-input>
          </el-form-item>
        </el-col>
         <el-col :span="8">
          <el-form-item label="关联企业">
            <el-select
              v-model="query.enterpriseId"
              placeholder="请选择"
              style="width: 80%"
            >
              <el-option
                :label="item.name"
                :value="item.id"
                v-for="(item, index) in companyInfo.enterList"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="带看经纪人手机号"
            prop="agentPhone"
            :rules="[{ required: true, message: '字段不能为空' }]"
          >
            <el-input
              maxlength="11"
              style="width: 80%"
              placeholder="请输入"
              type="text"
              v-model.trim="query.agentPhone"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item
            label="签约金额"
            prop="money"
            :rules="[{ required: true, message: '字段不能为空' }]"
          >
            <el-input
              style="width: 80%"
              placeholder="请输入"
              type="text"
              v-model.trim="query.money"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="签约周期"
            prop="signingCycle"
            :rules="[{ required: true, message: '字段不能为空' }]"
          >
            <el-input
              style="width: 80%"
              placeholder="请输入"
              type="text"
              v-model.trim="query.signingCycle"
            ></el-input>
          </el-form-item>
        </el-col>
        <br />
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="合同PDF">
            <el-upload
              class="upload-demo"
              drag
              action="/api/common/upload"
              multiple
              :on-success="success"
              :on-error="error"
              :file-list="fileList"
              :headers="headers"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
              <div class="el-upload__tip" slot="tip">
                只能上传文件，且不超过50MB
                <a
                  v-if="fileList.length > 0"
                  :href="fileList[0].url"
                  target="_blank"
                >
                  预览</a
                >
              </div>
            </el-upload>
          </el-form-item>
          <div class="flex-center">
            <el-button type="primary" @click="add">保存</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </d2-container>
</template>

<script>
import util from "@/libs/util";
export default {
  name: "",
  data() {
    return {
      id: this.$route.params.id,
      query: {},
      rules: {
      },
      houseList: [],
      gardenList: [],
      fileList: [],
       userList: [], //微信用户列表
      companyInfo: {
        enterList: [],
      }, //企业列表
    };
  },
  methods: {
    add() {
      if (
        this.query.housingSourceId == "" ||
        this.query.housingSourceId == undefined
      ) {
        return this.$message.error("请选择房源");
      }
      if (this.query.gardenId == "" || this.query.gardenId == undefined) {
        return this.$message.error("请选择园区");
      }
      console.log("编辑信息", "contractPdf", this.fileList[0].url);
      this.$refs["add"].validate((valid) => {
        if (valid) {
          let params = {
            id: this.id,
            ...this.query,
            contractPdf: this.fileList[0].url,
          };
           console.log('--',this.companyInfo.nickName)
          if(this.companyInfo.nickName){
            if(this.query.enterpriseId){
              let _com=this.companyInfo.enterList.filter(ele=>{
                return ele.id==this.query.enterpriseId
              })
              console.log('匹配',_com)
              params.partyName=_com[0].name;
            }else{
              params.partyName=this.companyInfo.nickName
            }
            params.wxUserId=this.companyInfo.id;
          }
          console.log("提交内容：", params);
          this.$axios.post("/wxContract/update", params).then((result) => {
            console.log("响应", result);
            if (result.data == 1) {
              this.$message.success("操作成功");
              this.$router.push("/contract");
              this.$refs["add"].resetFields();
            } else {
              this.$message.error(result.data.msg);
            }
          });
        } else {
          return false;
        }
      });
    },
    success(response, file, fileLis) {
      console.log("上传成功", response, file, fileLis);
      this.fileList = [{ url: process.env.VUE_APP_IMG_BASE + response.data }];
    },
    error(err, file, fileList) {
      console.log("上传失败", err, file, fileList);
      this.$message("文件上传失败");
    },
    getInfo() {
      this.$axios
        .post("/wxContract/getInfo", { id: this.id })
        .then((result) => {
          if (result) {
            this.query = {
              ...result.data,
            };
            this.fileList = [
              {
                name: "合同",
                url: result.data.contractPdf,
              },
            ];

            if(this.query.wxUserPhone){
              this.wxUserPhoneBlur();
            }
          } else {
            this.$message.error(result.data.msg);
          }
        });
    },
     //todo 乙方手机号输入,拿到用户手机号去请求企业列表
    wxUserPhoneBlur() {
      this.$axios
        .post("/wxUser/getInfo", {
          wxPhone: this.query.wxUserPhone,
        })
        .then((result) => {
          this.companyInfo = result.data;
        });
    },
  },
  created() {},
  computed: {
    headers() {
      return {
        Authorization: util.cookies.get("token"),
        uuid: util.cookies.get("uuid"),
      };
    },
  },
  mounted() {
    this.getInfo();
    //园区列表
    this.$axios
      .post("wxGarden/list", { pageNum: 1, pageSize: 999999 })
      .then((res) => {
        this.gardenList = res.data.list;
      });
    //房源列表
    this.$axios
      .post("wxHousingSource/list", { pageNum: 1, pageSize: 999999 })
      .then((res) => {
        this.houseList = res.data.list;
      });
  },
};
</script>

<style scoped lang="scss">
.item-box {
  width: 30%;
}
.card-box {
  display: flex;
  flex-wrap: wrap;
}
</style>
